import React, {useEffect, useRef, useState} from 'react';
import {Checkbox, Col, DatePicker, Row, Select, Space} from 'antd';
import {getPriceCompare, getTradesIntervalStat} from "@src/services/bookPirceStat";
import styles from './styles.module.less';
import LineChartsPriceCompare from "@src/components/HighCharts/LineChartsPriceCompare";
import ColumnChartTrades from "@src/components/HighCharts/ColumnChartTrades ";
import * as PropTypes from "prop-types";

const {Option} = Select;

const {RangePicker} = DatePicker;

RangePicker.propTypes = {
    onChange: PropTypes.func,
    style: PropTypes.shape({width: PropTypes.number})
};
const PriceCompare = () => {
    const [statisticalCenterData, setStatisticalCenterData] = useState([]);
    const [intervalStatData, setIntervalStatData] = useState([]);
    const [selectedExchange, setSelectedExchange] = useState(null); // 当前选择的交易所
    const [refreshFrequency, setRefreshFrequency] = useState('1'); // 默认刷新频率为每分钟
    const [refreshSymbol, setRefreshSymbol] = useState('BTC/USDT'); // 默认刷新频率为每分钟
    const intervalRef = useRef(null); // 保存定时器引用
    const [startDate, setStartDate] = useState(null);
    const [endDate, setEndDate] = useState(null);
    const [selectedData, setSelectedData] = useState([
        'okx',
    ]);
    useEffect(() => {
        onLoad(); // 初次加载数据

        // 根据刷新频率动态更新数据
        const refreshData = () => {
            onLoad(refreshFrequency); // 发送当前频率到后端
        };

        // 清除之前的定时器
        if (intervalRef.current) clearInterval(intervalRef.current);

        // 设置新的定时器
        const intervalTime =
            refreshFrequency === '1' ? 60000 :
                refreshFrequency === '60' ? 3600000 :
                    86400000; // 每分钟、每小时、每天对应的时间间隔

        intervalRef.current = setInterval(refreshData, intervalTime);

        return () => clearInterval(intervalRef.current); // 清理定时器
    }, [refreshFrequency, refreshSymbol, startDate, endDate]);

    const onLoad = async (frequency = '1') => {
        var frequency = refreshFrequency || '1'; // 设置默认值
        const params = {
            frequency,
            symbol : refreshSymbol,
            startDate: startDate ? startDate : "",
            endDate: endDate ? endDate : "",
        };
        // const bookPriceStat = await getPriceCompare(params); // 将频率发送到后端
        // if (bookPriceStat) {
        //     setStatisticalCenterData(bookPriceStat);
        // }

        const intervalStat = await getTradesIntervalStat(params)
        if (intervalStat) {
            setIntervalStatData(intervalStat);
        }
    };

    const handleExchangeChange = (value) => {
        setSelectedExchange(value); // 更新选中的交易所
    };

    const handleFrequencyChange = (value) => {
        setRefreshFrequency(value); // 更新刷新频率
    };
    const handleSymbolChange = (value) => {
        setRefreshSymbol(value); // 更新刷新频率
    };
    const handleDataSelectionChange = (checkedValues) => {
        setSelectedData(checkedValues); // 更新选择的数据项
    };
    const handleDateChange = (dates) => {
        if (dates && dates.length === 2) {
            setStartDate(dates[0]);
            setEndDate(dates[1]);
        } else {
            setStartDate(null);
            setEndDate(null);
        }
    };
    return (
        <div className={styles.home_box}>
            {/* 选择框区域 */}
            <div style={{marginBottom: '16px', display: 'flex', gap: '16px'}}>
                {/*<Select*/}
                {/*    placeholder="Select Exchange"*/}
                {/*    style={{width: 200}}*/}
                {/*    onChange={handleExchangeChange}*/}
                {/*    allowClear*/}
                {/*>*/}
                {/*    <Option value="All">All</Option>*/}
                {/*    <Option value="binance">Binance</Option>*/}
                {/*    <Option value="bybit">Bybit</Option>*/}
                {/*    <Option value="coinbase">Coinbase</Option>*/}
                {/*    <Option value="kraken">Kraken</Option>*/}
                {/*    <Option value="okx">OKX</Option>*/}
                {/*</Select>*/}
                <Select
                    placeholder="Select Refresh Frequency"
                    style={{width: 200}}
                    onChange={handleSymbolChange}
                    defaultValue="symbol"
                >
                    <Option value="BTC/USDT">BTC/USDT</Option>
                    <Option value="DOGE/USDT">DOGE/USDT</Option>
                    <Option value="XRP/USDT">XRP/USDT</Option>
                    <Option value="ETH/USDT">ETH/USDT</Option>
                    <Option value="BNB/USDT">BNB/USDT</Option>
                </Select>
                <Select
                    placeholder="Select Refresh Frequency"
                    style={{width: 200}}
                    onChange={handleFrequencyChange}
                    defaultValue="minute"
                >
                    <Option value="1">1</Option>
                    <Option value="5">5</Option>
                    <Option value="10">10</Option>
                    <Option value="30">30</Option>
                    <Option value="60">60</Option>
                </Select>
                <div style={{marginBottom: '16px'}}>
                    <Checkbox.Group
                        options={[
                            {label: 'all', value: 'all'},
                            {label: 'binance', value: 'binance'},
                            {label: 'okx', value: 'okx'},
                            {label: 'cryptocom', value: 'cryptocom'},
                        ]}
                        value={selectedData}
                        onChange={handleDataSelectionChange}
                    />
                    <Space direction="vertical" style={{marginBottom: 16}}>
                        <RangePicker
                            showTime={{format: 'HH:mm:ss'}}
                            format="YYYY-MM-DD HH:mm:ss"
                            onChange={handleDateChange}
                        />
                    </Space>
                </div>
            </div>

            {/* 图表展示 */}
            <div style={{width: '100vw', height: '100vh', background: '#fff'}}>
                {/*<Row>*/}
                {/*    <Col span={22}>*/}
                {/*        <LineChartsPriceCompare*/}
                {/*            trendData={statisticalCenterData}*/}
                {/*            selectedData={selectedData}*/}
                {/*        />*/}
                {/*    </Col>*/}
                {/*</Row>*/}
                <Row>
                    <Col span={22}>
                        <ColumnChartTrades
                            trendData={intervalStatData}
                            selectedData={selectedData}
                        />
                    </Col>
                </Row>
            </div>
        </div>
    );
};

export default PriceCompare;
